<template>
	<view class="my-coconut-mine">
		<view class="nav">
			<view class="nav_box" :class="changeIndex==index?'nav_box_active':''" v-for="(item,index) in navList"
				:key="index" @click="changeNav(index)">
				<text>{{item.value}}</text>
				<view class="nav_line" v-if="changeIndex==index"></view>
			</view>
		</view>
		<navigator class="lpp_real_name" hover-class="none" url="/pages/my/certification/certification?isRealName=false">
			<text class="lpp_word">请在奖池开奖前进行实名验证否则无法参与奖池活动</text>
			<view class="red_right">前往实名 <image src="/static/wallet/red_right.png" ></image> </view>
		</navigator>
		<view class="list" v-if="changeIndex==0">
			<view class="list_box" v-for="(item,lIndex) in dataList" :key="lIndex" @click="jumpOrderDetails(lindex,item)">
				<view class="list_box_c">
					<image class="list_box_c_l" :src="item.activityImg" mode="aspectFill"></image>
					<view class="list_box_c_r">
						<view class="list_box_c_r_title ellipseHide_two">{{item.couponName}}</view>
						<!-- <view class="reward_tips">预计挖取3通分奖励</view> -->
						<view class="list_box_c_r_price" >
							￥<text>138.90</text>
						</view>
					</view>
				</view>
				<view class="reward_tips">
					<text>数字勋章/CoCo到店使用后发放</text>
					<text>幸运奖池未开奖</text>
				</view>
				<view class="list_box_shop">
					<view class="lbs_l">
						<image src="/static/wallet/shop.png" mode="widthFix"></image>
						<text>超值到店</text>
					</view>
					<view class="lbs_line"></view>
					<view class="lbs_r ellipseHide_two">百年谭鸭血重庆老火锅超值双人火锅套餐</view>
				</view>
				<view class="list_box_use">
					<view class="lbu_l">当前使用还有机会争夺奖池排行前五</view>
					<view class="lbu_r">立即使用</view>
				</view>
				<view class="list_box_b">
					<view class="list_box_b_rlue" @click="ruleClick(item,lIndex)">
						<text>使用规则</text>
						<image class="direction_icon" :class="item.ruleShow?'change_open':'change_close'"
							src="@/static/sy/my-coconut-mine/direction_icon.png" mode=""></image>
					</view>
					<view class="rule_detail" v-if="item.ruleShow">{{item.useDetail}}</view>
				</view>
			</view>
			<view class="no_info" v-if="dataList.length==0">
				<image src="/static/my/order_no.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</view>
		
		<view class="list" v-if="changeIndex==1">
			<view class="list_box" v-for="(item,lIndex) in thirdlyList" :key="lIndex">
				<view class="list_box_t">
					<view class="list_box_t_num">
						<view class="list_box_t_num_txt">订单编号：</view>
						<view class="list_box_t_num_number">{{item.orderNo}}</view>
					</view>
					<view class="list_box_t_status">{{item.statusDict}}</view>
				</view>
				<view class="list_box_c">
					<image class="list_box_c_l" :src="item.activityImg" mode="aspectFill"></image>
					<view class="list_box_c_r">
						<view class="list_box_c_r_title ellipseHide_two">{{item.couponName}}</view>
						<view class="phone">{{item.account}}</view>
						<view class="list_box_c_r_b">
							<view class="money">
								<text style="font-size: 26rpx;">￥</text>
								<text class="money_num">{{item.payMoney}}</text>
							</view>
							<view class="type_num" v-if="item.awardAmount!=''">+{{item.awardAmount}}
								{{item.awardTypeDict}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="list_box_b">
					<view class="time_two">{{item.verificationTime}}</view>
					<view class="exchange_code">
						<view class="exchange_code_txt">兑换码：KIFJHFHEIHFLKJDF</view>
						<image class="copy_icon" src="@/static/my/copy.png" mode=""></image>
					</view>
				</view> -->
				<view class="list_box_b2" v-if="item.beeShenyeCardDetailDTO.cardNumber!='无卡号'">
					<view class="">卡号：{{item.beeShenyeCardDetailDTO.cardNumber}}</view>
				</view>
				<view class="list_box_b2">
					<view class="">密码：{{item.beeShenyeCardDetailDTO.cardPwd}}</view>
					<view class="exchange_code" @click="copy(item.beeShenyeCardDetailDTO.cardPwd)">
						<image class="copy_icon" src="@/static/my/copy.png" mode=""></image>
					</view>
				</view>
				<view class="list_box_b2">
					<view class="">卡密有效期：{{item.beeShenyeCardDetailDTO.cardDeadline}}</view>
				</view>
			</view>
			<view class="no_info" v-if="thirdlyList.length==0">
				<image src="/static/my/order_no.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</view>
		
		<view class="list" v-if="changeIndex==2">
			<view class="list_box" v-for="(item,lIndex) in thirdlyList" :key="lIndex">
				<view class="list_box_t">
					<view class="list_box_t_num">
						<view class="list_box_t_num_txt">订单编号：</view>
						<view class="list_box_t_num_number">{{item.orderNo}}</view>
					</view>
					<view class="list_box_t_status">{{item.statusDict}}</view>
				</view>
				<view class="list_box_c">
					<image class="list_box_c_l" :src="item.activityImg" mode="aspectFill"></image>
					<view class="list_box_c_r">
						<view class="list_box_c_r_title ellipseHide_two">{{item.couponName}}</view>
						<view class="phone">{{item.account}}</view>
						<view class="list_box_c_r_b">
							<view class="money">
								<text style="font-size: 26rpx;">￥</text>
								<text class="money_num">{{item.payMoney}}</text>
							</view>
							<view class="type_num" v-if="item.awardAmount!=''">+{{item.awardAmount}}
								{{item.awardTypeDict}}
							</view>
						</view>
					</view>
				</view>
				<view class="list_box_b">
					<view class="time_two">{{item.verificationTime}}</view>
				</view>
			</view>
			<view class="no_info" v-if="thirdlyList.length==0">
				<image src="/static/my/order_no.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view>
		</view>
		
		<view class="invalid_coconut" v-if="changeIndex==0">
			<view class="invalid_coconut_box" @click="jumpInavlid">
				<text>失效宝箱</text>
				<image src="@/static/sy/my-coconut-mine/right_icon.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		couponPlatformList,
		couponThirdlyList
	} from '@/api/sy.js'
	export default {
		data() {
			return {
				changeIndex: 0,
				navList: [{
					id: '1',
					value: '平台订单'
				}, {
					id: '2',
					value: '兑换订单'
				}, {
					id: '3',
					value: '直充订单'
				}, ],
				ruleShow: false,
				status: '1', //状态 shenye_customer_coupon_status 1 待使用 2 已核销 3 已退款 4 已过期
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				dataList: [], //平台订单列表
				type: '', //订单类型 1直充 2 卡密
				thirdlyList: [], //第三方列表
				latLntdata: {},
			}
		},
		onLoad(option) {
			this.latLntdata = option.info
			this.getList()
		},
		methods: {
			changeNav(index) { //类型选择
				this.changeIndex = index
				this.pageNum = 1
				if (index == 0) { //平台
					this.getList()
				} else if (index == 1) { //兑换
					this.type = 2
					this.getThirdList()
				} else { //直充
					this.type = 1
					this.getThirdList()
				}
			},
			copy(text) { //复制
				if (text != '') {
					var _this = this
					_this.$copyText(text).then(
						res => {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						}
					)
				}
			},
			ruleClick(item, index) { //使用规则打开关闭
				this.dataList[index].ruleShow = !this.dataList[index].ruleShow
				this.$forceUpdate()
			},
			jumpInavlid() {
				uni.navigateTo({
					url: '/pages/wallet/treasure-chest/invalid-order'
				})
			},
			async getList() { //获取平台订单列表
				uni.showLoading({
					title: '加载中'
				})
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					status: this.status
				}
				try {
					const res = await couponPlatformList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			// 跳转订单详情
			jumpOrderDetails(){
				uni.navigateTo({
					url:'/pages/wallet/treasure-chest/order-details'
				})
			},
			buyClick(item) { //跳转商品详情(立即使用)
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') {
					// console.log('我是iOS')
					// uni.showModal({
					// 	content:'ios'
					// })
					window.location.href = "/pages/pay/mine-details-one?latLntdata=" + this.latLntdata + '&id=' + item.id +
						'&type=' + '1'
				} else if (platform == 'android') {
					// uni.showModal({
					// 	content:'安卓'
					// })
					uni.navigateTo({
						url: '/pages/pay/mine-details-one?latLntdata=' + this.latLntdata + '&id=' + item.id +
						'&type=' + '1'
					})
				}
				// window.location.href = "/pages/pay/mine-details-one?latLntdata=" + this.latLntdata + '&id=' + item.id +
				// 	'&type=' + '1'
			},
			async getThirdList() { //获取兑换订单、直充订单列表
				uni.showLoading({
					title: '加载中'
				})
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					type: this.type
				}
				try {
					const res = await couponThirdlyList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.thirdlyList = this.thirdlyList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.thirdlyList = res.result.records
					}
					this.thirdlyList.forEach((item) => {
						item.ruleShow = false
					})
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}

			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {

			} else {
				this.pageNum++; //每触底一次 page + 1;
				if (this.changeIndex == 0) {
					this.getList()
				} else {
					this.getThirdList()
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F7F9;
	}

	view {
		box-sizing: border-box;
	}

	.my-coconut-mine {
		padding-bottom: 200rpx;
	}

	.nav {
		display: flex;
	}

	.nav_box {
		padding-top: 22rpx;
		height: 88rpx;
		background-color: #fff;
		font-size: 32rpx;
		color: #555555;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% / 3);
	}

	.nav_line {
		width: 60rpx;
		height: 4rpx;
		/* background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%); */
		background-color: #0B87F2;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.nav_box_active {
		font-size: 32rpx;
		color: #222222;
		font-weight: 600;
	}

	.list {
		padding: 24rpx 30rpx 40rpx 30rpx;
	}

	.list_box {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx #E4E4E4;
		border-radius: 20rpx;
		padding: 0 24rpx 30rpx;
		margin-bottom: 30rpx;
	}

	.list_box_c {
		display: flex;
		padding: 30rpx 0 26rpx;
	}

	.list_box_c_l {
		width: 142rpx;
		height: 142rpx;
		margin-right: 30rpx;
		border-radius: 16rpx;
	}

	.list_box_c_r {
		flex: 1;
		/* height: 196rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between; */
	}

	.list_box_c_r_title {
		width: 408rpx;
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 10rpx;
		font-weight: bold;
	}

	.list_box_c_r_price {
        color: #FF3A3A;
		font-size: 32rpx;
		font-weight: bold;
	}
	.list_box_c_r_price text{
		font-size: 44rpx;
	}
	
	.reward_tips text{
		display: inline-block;
		color: #E41717;
		padding: 2rpx 8rpx;
		background: #FEEDEE;
		border-radius: 4rpx;
		font-size: 22rpx;
		box-sizing: border-box;
		margin-right: 16rpx;
		
	}
	.list_box_shop{
		display: flex;
		align-items: center;
		width: 100%;
		height: 148rpx;
		background: #F7F9FC;
		border-radius: 8rpx;
		padding: 18rpx 36rpx;
		margin-top: 30rpx;

	}
	.lbs_l{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #222222;
		font-size: 22rpx;
	}
	.lbs_l image{
		width: 68rpx;
		height: 72rpx;
	}
	.lbs_line{
		width: 0;
		height: 110rpx;
		border-right: 2rpx solid #DCDCDC;
		margin: 0 30rpx 0 38rpx;
	}
	.lbs_r{
		flex: 1;
		color: #222222;
		font-size: 30rpx;
		line-height: 42rpx;
		font-weight: 600;
	}
	/* end */
	
	.list_box_use{
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 16rpx 0 30rpx 0;
		border-bottom: 2rpx solid #D8D8D8;
	}
	.lbu_l{
		flex: 1;
		color: #222222;
		font-size: 26rpx;
	}
	.lbu_r{
		width: 124rpx;
		height: 44rpx;
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		border-radius: 200rpx;
		line-height: 44rpx;
		color: #fff;
		font-size: 22rpx;
		text-align: center;
		margin-left: 20rpx;
	}
	/* end */
	.list_box_b {
		padding: 24rpx 0 0;
	}

	.list_box_b_rlue {
		font-size: 26rpx;
		color: #222222;
	}

	.list_box_b2 {
		font-size: 26rpx;
		color: #222222;
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.direction_icon {
		width: 18rpx;
		height: 18rpx;
		margin-left: 12rpx;
	}

	.rule_detail {
		font-size: 26rpx;
		color: #555555;
		line-height: 40rpx;
		padding-top: 16rpx;
		word-break: break-all;
	}

	.change_open {
		transform: rotate(-180deg);
		transition: all 0.2s;
	}

	.change_close {
		transform: rotate(0deg);
		transition: all 0.2s;
	}

	.list_box_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #D8D8D8;
	}

	.list_box_t_num {
		width: 500rpx;
		font-size: 28rpx;
		color: #222222;
		display: flex;
		word-wrap: break-word;
	}

	.list_box_t_num_number {
		word-wrap: break-word;
		width: 350rpx;
	}

	.list_box_t_status {
		color: 30rpx;
		color: #1053FF;
	}

	.time_two {
		font-size: 26rpx;
		color: #989898;
	}

	.exchange_code {
		word-wrap: break-word;
		font-size: 26rpx;
		color: #222222;
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.exchange_code_txt {
		width: 580rpx;
	}

	.phone {
		font-size: 28rpx;
		color: #555555;
		margin: 12rpx 0 18rpx;
	}

	.money {
		color: #FF3A3A;
	}

	.money_num {
		font-size: 36rpx;
		font-weight: bold;
	}

	.type_num {
		font-size: 30rpx;
		color: #FF3A3A;
	}

	.copy_icon {
		width: 32rpx;
		height: 31rpx;
	}

	.invalid_coconut {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}

	.invalid_coconut_box {
		font-size: 34rpx;
		color: #333333;
		border: 2rpx solid #B4B4B4;
		width: 270rpx;
		height: 72rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.invalid_coconut_box image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 6rpx;
	}

	.no_info {
		padding-top: 280rpx;
		padding-bottom: 60rpx;
	}
	
	/*  */
	.lpp_real_name{
		display: flex;
		flex-direction: row;
		color: #CF2B2B;
		font-size: 24rpx;
		width: 710rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding: 20rpx 16rpx;
		background: #ffffff;
		border-radius: 12rpx;
		box-sizing: border-box;
	}
	.lpp_real_name .lpp_word{
		flex: 1;
	}
	.lpp_real_name .red_right{
		margin-left: 10rpx;
	}
	.red_right image{
		width: 16rpx;
		height: 16rpx;
	}
</style>
